<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no" />
	<title>课程列表</title>
	<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/page/course.css">
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1476783367_7199097.css">
	<script type="text/javascript" src="../static/js/public/computeDPR.my.js"></script>
</head>
<body class="swiper-container">
	<header class="title"> <a class="butt left" href="my.html">返回</a> 课件列表</header>
	<div class="swiper-wrapper">
		<div class="scroll swiper-slide" id="ok" data-pagination=0 data-pagination-total=1 >
			<div class="list-2-n course-list">
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src=""></div>
					<div class="text"><p class="title text-overflow-1">课程一</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">课程二</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">课程三</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">课程四</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">课程五</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">课程六</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">分类七</p></div>
				</a>
				<a class="block list-2-n-item course-item" href="./courseList.html">
					<div class="img-box"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
					<div class="text"><p class="title text-overflow-1">分类八</p></div>
				</a>
			</div>
			<div class="button-box"><button class="button button-1" style="width: 100%;">加载更多</button></div>
			<div class="loading"><span class="iconfont icon-loading rotate"></span><span>正在加载中...</span></div>
			<div class="no-more"><span>所有信息已经加载完毕</span></div>
		</div>
	</div>
</body>
<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script type="text/javascript">
	(function(){
		// 绑定滑动加载更多
		// 可学习课程列表滚动事件
		var ajax_status = true; //ajax状态
		var time_ok = '';
		$('#ok').on('scroll',function(e){
			clearTimeout(time_ok);
			var _this = $(this);
			time_ok = setTimeout(function(){
				if( _this.attr('data-pagination') < _this.attr('data-pagination-total') && $('.course-list',_this).height() < ( _this.height() + _this.scrollTop() ) && ajax_status ){
					ajax_status == false; //将ajax状态设置为占用
					// 调用数据拉取方法
					ajaxData({
						url: 'www.god.com/index.php/Weixin/room',
						data: {
							page: (_this.attr('data-pagination') + 1),
						}
					},
					function(data){
						showData(_this,data)
					},
					function(data){
						console.log('error');
					});
				}
			},0);
		});

		// 请求成功 循环显示数据
		function showData(dom,data){

		}

		// 封装ajax
		function ajaxData(e,callback1,callback2){
			$.ajax({
				type: e.type || 'POST',
				url: e.url || '',
				data: e.data || '',
				dataType: e.dataType || 'json',
				context: e.context || '' ,
				success: function(data){
					callback1(data);
				},
				error: function(data){
					callback2(data);
				}
			});
		}
	})();
</script>
</html>